{% extends "images/base.html" %}
{% load staticfiles %}
{% block title %}images{% endblock %}
{% block content %} 
<div>
    <button type="button" class="btn btn-primary btn-lg btn-block" onclick="add_image()"> 添加图片</button>
    <div style="margin-top:10px;"> 
        <table class="table table-hover">
            <tr> 
                <td>序号</td>
                <td>标题</td> 
                <td>图片</td> 
                <td>操作</td>
            </tr>
            {% for image in imgs %} 
            <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ image.name }}</td>
                <td><img src="{{ image.img.url }}" width="100px" height="100px" /></td>
                <td>
                    <a name="edit" href="javascript:" onclick="edit_image(this, {{ image.id }})"><span class="glyphicon glyphicon-pencil"></span></a>
                    <a nane="delete" href="javascript:" onclick="del_image(this, {{ image.id }})"><span class="glyphicon glyphicon-trash" style="margin-left:20px;"></span></a>
                </td>
              
            </tr>
            {% empty %} 
            <p>还没有图片，请点击上面的按钮添加图片</p> 
            {% endfor %}
        </table>  
    </div>
</div>


<script src="{% static 'js/jquery.js' %}"></script>
<script src="{% static 'js/layer.js' %}"></script>
<script>
    
    function add_image(){
        let index=layer.open({
            type: 1,
            skin: 'layui-layer-demo',
            closeBtn: 1,
            shift: 2,
            shadeClose: true,
            title: "Add Image",
            area: ['600px', '440px'],
            content: "<div style='padding:20px'><p>请新增扩展名是.jpg 或.png 的网上照片地址</p><form method='post' enctype='multipart/form-data'><label for='photo' class='col-sm-2 control-label'>图片</label><input type='file' name='img'><button type='submit'>上传</button><img src='' alt=''/><input id='newphoto' type='button' class='btn btn-default' value='Add It'></form></div>",
            success: function(){
                // layer.open({
                //     title: "测试",
                //     content: 'test'
                // })
            },
        })
    }

    function del_image(the, image_id){
        var image_title = $(the).parents("tr").children("td").eq(1).text(); 
        layer.open({
            type: 1,
            skin: "layui-layer-rim",
            area: ["400px", "200px"],
            title: "删除图片",
            content: '<div class="text-center" style="margin-top:20px"><p>是否确定删除《'+image_title+'》</p> </div>',
            btn: ['确实', '取消'],
            yes: function () {
                $.ajax({
                    url: '{% url "images:del_image" %}',
                    data: {"image_id": image_id},
                    type: "POST",
                    success: function (e) {
                        let status = e['status']
                        if (status == "1") {
                            parent.location.reload();
                            layer.msg("删除成功");
                        }else if(status == "2"){
                            layer.msg("数据库中数据删除，但实际图片未删除");
                        }
                    },
                })
            }
        })

    }

    function edit_image(the, image_id) {
        $.ajax({
            url: '{% url "images:edit_image" %}',
            data: {"image_id": image_id},
            type: "POST",
            success: function (e) {
                let status = e['status'];
                if(status=="1"){
                    layer.msg(e['img_path']+'\n'+e['imgs_name']['mask']);
                }else{
                    layer.msg("出错了");
                }
            }
        })
        
    }
</script>
{% endblock %}